<template>

  <Topbar />
  <el-row >
    <el-col :span="8" style="padding: 20px;">
      <div class="left">
        <el-card shadow="never">
          <h3>销售类型分布</h3>
          <chart />
        </el-card>
        <el-card shadow="never">
          <h3>产品销售量排行</h3>
          <TopProduct />
        </el-card>

      </div>
    </el-col>
    <el-col :span="16" style="padding: 20px;padding-left: 0;">
      <el-card shadow="never" style="height: 100%;" body-style="height: 100%;">
        <h3>成交量趋势</h3>
        <OrderTrendsChart />
        </el-card>
     
    </el-col>
  </el-row>
</template>

<script setup>
import Topbar from './components/Topbar.vue';
import chart from './components/ServiceTypeChart.vue';
import OrderTrendsChart from './components/OrderTrendsChart.vue';
import TopProduct from './components/TopProduct.vue';
</script>

<style>
.left {
  display: flex;
  flex-direction: column;
  
  gap: 20px;
}
</style>